<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 解构赋值 
        // 1.数组的解构 
        // ES5:
        // var arr = ["张安","李四","王五"];
        // var a = arr[0];
        // var b = arr[1];
        // var c = arr[2];
        // console.log(a,b,c);

        // ES6
        // var arr = ["张安","李四","王五"];
        // // a、b、c和数组是一一对应关系 ，且是自定义的；
        // let [a,b,c] = arr;
        // console.log(a,b,c);

        // 数组解构参数；
        // ES5
        // function fn(myarr){
        //     let a = myarr[0];
        //     let b = myarr[1];
        //     let c = myarr[2];
        //     console.log(a,b,c);
        // }
        // ES6
        // function fn([a,b,c]){
        //     console.log(a,b,c);
        // }
        // var arr = ["张安","李四","王五"];
        // fn(arr);


        // 2.对象的解构 ；
        // var obj = {
        //     name:"张三",
        //     age:20,
        //     height:"180cm"
        // }
        // ES5;
        // var name = obj.name;
        // var age = obj.age;
        // var height = obj.height;
        // console.log(name,age,height);
        // ES6；
        // let {name:names,age:ages,height:heights} = obj;
        // console.log(names,ages,heights);
        // 最常用的解构 
        // 如果对象的键名和键值相同了，那么可以省略一个
        // let myname = "张三";
        // let age = 20;
        // let height = "180cm";
        // let obj = {
        //     myname:"张三",
        //     age:20,
        //     height:"178cm"
        // }
        // // console.log(obj);

        // let {myname,age,height} = obj;
        // console.log(myname,age,height);

        // 对象的深层次解构 ；
        // 要保持和原本对象的结构一致就可以了；
        var obj = {
            name:"张三",
            obj2:{
                height:"179cm"
            }
        }

        // let {name:name,obj2:{height:height}} = obj;
        // console.log(name,height);

        function fn({name,obj2:{height}}){
            console.log(name,height);
        }
        fn(obj);

        // 总结 ： 数组 及 对象的解构  ； 1.深层次解构 2. 函数参数里的解构 ；


    </script>
</body>
</html>